<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Server Monitor system</title>
        <link rel="stylesheet" type="text/css" href="{{ static_url("css/bootstrap.css") }}">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script>
$(function () {
    $('#load').highcharts({
        title: {
            text: '系统负载',
            x: -20 //center
        },
        subtitle: {
            text: 'Server: {{ serverip }}',
            x: -20
        },
        xAxis: {
            categories:{{categories}}
        },
        yAxis: {
            title: {
                text: '负载值'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: ''
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: '1分钟',
            data: {{ oneM }}
        }, {
            name: '5分钟',
            data: {{ fiveM }}
        }, {
            name: '15分钟',
            data: {{ fifteenM }}
        }]
    });
});
</script>
<script>
$(function () {
    $('#cpu').highcharts({
        title: {
            text: 'CPU使用率',
            x: -20 //center
        },
        subtitle: {
            text: 'Server: {{ serverip }}',
            x: -20
        },
        xAxis: {
            categories:{{categories}}
        },
        yAxis: {
            title: {
                text: 'CPU使用'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: ''
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'CPU使用率',
            data: {{ cpuused }}
        }]
    });
});
</script>
<!-- 内存使用-->
<script>
$(function () {
    $('#memory').highcharts({
        title: {
            text: '内存使用',
            x: -20 //center
        },
        subtitle: {
            text: 'Server: {{ serverip }}',
            x: -20
        },
        xAxis: {
            categories:{{categories}}
        },
        yAxis: {
            title: {
                text: '内存使用'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: ''
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: '总内存(M)',
            data: {{ memTotalReal }}
        }, {
            name: '内存使用(M)',
            data: {{ memory }}
        }, {
            name: '剩余内存(M)',
            data: {{ memAvailReal }}
        }]
    });
});
</script>
<!-- swap使用-->
<script>
$(function () {
    $('#swap').highcharts({
        title: {
            text: 'swap使用',
            x: -20 //center
        },
        subtitle: {
            text: 'Server: {{ serverip }}',
            x: -20
        },
        xAxis: {
            categories:{{categories}}
        },
        yAxis: {
            title: {
                text: 'swap使用'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: ''
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: '总swap(M)',
            data: {{ memTotalSwap }}
        }, {
            name: 'swap使用(M)',
            data: {{ memUsedSwap }}
        }, {
            name: '剩余swap(M)',
            data: {{ memAvailSwap }}
        }]
    });
});
</script>
<!-- disk使用-->
<script>
$(function () {
    $('#disk').highcharts({
        title: {
            text: '磁盘使用',
            x: -20 //center
        },
        subtitle: {
            text: 'Server: {{ serverip }}',
            x: -20
        },
        xAxis: {
            categories:{{categories}}
        },
        yAxis: {
            title: {
                text: '磁盘使用'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: ''
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: '总空间(G)',
            data: {{ dskTotal }}
        }, {
            name: '已用空间(G)',
            data: {{ dskUsed }}
        }, {
            name: '剩余空间(G)',
            data: {{ dskAvail }}
        }]
    });
});
</script>
<!-- tcp/udp连接数-->
<script>
$(function () {
    $('#tcp').highcharts({
        title: {
            text: '网络连接数',
            x: -20 //center
        },
        subtitle: {
            text: 'Server: {{ serverip }}',
            x: -20
        },
        xAxis: {
            categories:{{categories}}
        },
        yAxis: {
            title: {
                text: '网络连接数'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: ''
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: '总连接数',
            data: {{ connections }}
        }, {
            name: 'TCP连接数',
            data: {{ tcps }}
        }, {
            name: 'UDP连接数',
            data: {{ udps }}
        }]
    });
});
</script>

<!-- 进程数/登陆用户数-->
<script>
$(function () {
    $('#process').highcharts({
        title: {
            text: '进程数与登陆用记数',
            x: -20 //center
        },
        subtitle: {
            text: 'Server: {{ serverip }}',
            x: -20
        },
        xAxis: {
            categories:{{categories}}
        },
        yAxis: {
            title: {
                text: '进程数与登陆用记数'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: ''
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: '进程数',
            data: {{ connections }}
        }, {
            name: '登陆用户数',
            data: {{ loginusers }}
        }]
    });
});
</script>

    </head>

    <body>
        <script src="{{ static_url("js/bootstrap.js") }}"></script>
         <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
  
          </button>
          <a class="brand" href="/">Server Monitor system</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="/">首页</a></li>
              <li><a href="/all">全部服务器</a></li>
              <li><a href="/group">按业务分组</a></li>
              <li><a href="/admin">后台管理</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">
        <div class="row-fluid">
        <div class="span4">...</div>
        <div class="span8">...</div>
        </div>
        <table class="table table-striped">
            <tr><td></tr>
            <tr><td></tr>
        </table>
    
    </div>
    <h4>{{ serverip }}</h4>
    <legend>系统负载</legend>
    <div id="load" style="width:88%; height:300px;"></div>
    <legend>CPU使用率</legend>
    <div id="cpu" style="width:88%; height:300px;"></div>
    <legend>内存使用</legend>
    <div id="memory" style="width:88%; height:300px;"></div>
     <legend>swap使用</legend>
    <div id="swap" style="width:88%; height:300px;"></div>
     <legend>硬盘使用</legend>
    <div id="disk" style="width:88%; height:300px;"></div>
     <legend>网络连接数</legend>
    <div id="tcp" style="width:88%; height:300px;"></div>
     <legend>进程与用户数</legend>
    <div id="process" style="width:88%; height:300px;"></div>
    
    <!-- /container -->

    </body>
</html>